<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">
  <style>

  </style>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>

  <!-- <h1 class="animated hinge infinite">1111111111111</h1> -->

  <div id="box">
    <ul>
      <li v-for="data in datalist" :key="data.id">
        <h3>{{data.nm}}</h3>
        <!-- <img :src="changepath(data.img)"/> -->

        <!-- 让所有的data.img都走一下imgSizer过滤器 得到新的data.img -->
        <img :src="data.img | imgSizer" />
      </li>
    </ul>
  </div>

  <script>

    // 将入参中的'w.h'全部替换为'128.180'
    Vue.filter("imgSizer", function (data) {
      return data.replace('w.h', '128.180')
    })

    new Vue({
      el: "#box",
      data: {
        datalist: []
      },
      mounted() {
        axios.get("test.json").then(res => {
          console.log(res.data);
          this.datalist = res.data.movieList
        })
      },

      methods: {
        changepath(path) {
          return path.replace('w.h', '128.180')
        }
      }
    })

      //"http://p0.meituan.net/w.h/moviemachine/5dac476535359b7bb951ff15d37a9d0b153821.jpg"
      //https://p0.meituan.net/128.180/moviemachine/5dac476535359b7bb951ff15d37a9d0b153821.jpg
  </script>

</body>

</html>